<div class="page page-charts" >

    <section data-ng-controller="chartCtrl">
        <div class="row">
            <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Easy Pie Chart</h3>
                    </div>
                    <div class="panel-body text-center">
                        <div easypiechart options="easypiechart.options" percent="easypiechart.percent" class="easypiechart">
                            <span class="pie-percent" ng-bind="easypiechart.percent"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Easy Pie Chart</h3>
                    </div>
                    <div class="panel-body text-center">
                        <div easypiechart options="easypiechart2.options" percent="easypiechart2.percent" class="easypiechart">
                            <span class="pie-percent" ng-bind="easypiechart2.percent"></span>
                        </div>
                    </div>
                </div>            
            </div>

            <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Easy Pie Chart</h3>
                    </div>
                    <div class="panel-body text-center">
                        <div easypiechart options="easypiechart3.options" percent="easypiechart3.percent" class="easypiechart">
                            <span class="pie-percent" ng-bind="easypiechart3.percent"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section data-ng-controller="sparklineCtrl">

        <section class="panel panel-default">
            <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> Mini Chart</div>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Graph</th>
                        <th>Chart Type</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <span data-sparkline
                                  data-data="simpleChart1.data"
                                  data-options="simpleChart1.options"
                                  ></span>
                        </td>
                        <td>Line Charts</td>
                        <td>Default chart type</td>
                    </tr>
                    <tr>
                        <td><span data-sparkline
                                  data-data="simpleChart2.data"
                                  data-options="simpleChart2.options"
                                  ></span></td>
                        <td>Bar Charts</td>
                        <td>General chart type</td>
                    </tr>
                    <tr>
                        <td><span data-sparkline
                                  data-data="simpleChart3.data"
                                  data-options="simpleChart3.options"
                                  ></span></td>
                        <td>Tristate Charts</td>
                        <td>Useful for showing win-lose-draw information</td>
                    </tr>
                    <tr>
                        <td>
                            <span data-sparkline
                                  data-data="tristateChart1.data"
                                  data-options="tristateChart1.options"
                                  ></span>
                        </td>
                        <td>Pie Charts</td>
                        <td>General chart type</td>
                    </tr>
                </tbody>
            </table>
        </section> 

        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Line Charts</h3>
                    </div>
                    <div class="panel-body">
                        <div data-sparkline
                              data-data="largeChart1.data"
                              data-options="largeChart1.options"
                              ></div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Bar Charts</h3>
                    </div>
                    <div class="panel-body text-center">
                        <div data-sparkline
                              data-data="largeChart2.data"
                              data-options="largeChart2.options"
                              ></div>
                    </div>
                </div>            
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Pie Charts</h3>
                    </div>
                    <div class="panel-body text-center">
                        <div data-sparkline
                              data-data="largeChart3.data"
                              data-options="largeChart3.options"
                              ></div>
                    </div>
                </div>            
            </div>
        </div>

    </section>

</div>
